<template>
    <div>
    <div class="div-backgrond" >
        <div  v-for="(item,index ) in imageList" class="div-small" >
            <img @click="selectPeople(index)" class="head-img" src="../assets/officeadd.png">
            <p v-bind:class="{'select':isS,'npselect':isN}" >{{placeholder}}</p>
            <img v-if="index<imageList.length-1"  src="../assets/officejiantou.png" class="jiantou">
        </div>

    </div>
        <div  style="height: 0.25rem">
        <img v-if="isHidden" src="../assets/officesanjiao.png" v-bind:class= "{ 'first':isA, 'second': isB,'three':isC}" >
        </div >
        <examineAlertComponent1 v-if="isA" :peopleList=imageList[currentindex] v-bind:currentindex='0' @selectHead="chooseHead" :msg="msg"></examineAlertComponent1>
        <examineAlertComponent2 v-if="isB" :peopleList=imageList[currentindex] v-bind:currentindex='1' @selectHead="chooseHead" :msg="msg"></examineAlertComponent2>
        <examineAlertComponent3 v-if="isC" :peopleList=imageList[currentindex] v-bind:currentindex='2' @selectHead="chooseHead" :msg="msg"></examineAlertComponent3>
    </div>
</template>

<script>
    import examineAlertComponent1 from "@/components/examineAlertComponent.vue";
    import examineAlertComponent2 from "@/components/examineAlertComponent.vue";
    import examineAlertComponent3 from "@/components/examineAlertComponent.vue";



    export default {
        name: "examineComponent",

        data() {
            return {
                isA: false,
                isB:false,
                isC:false,
                isHidden:false,
                isS:false,
                isN:true,
                approvers:'',
                currentindex:0,
            };
        },

        components: {

            examineAlertComponent1,
            examineAlertComponent2,
            examineAlertComponent3,

        },
        props: {
            imageList: {
                type: Array,
                default() {
                    return []
                }
            },

            placeholder:{
                type: String,
                default: ''
            }

        },
        computed:{

        },
        created:{

        },
        methods:{
            selectPeople(index) {
                this.isHidden=true;
                if (index === 0) {
                    this.isA = true;
                    this.isB = false;
                    this.isC = false;
                    this.currentindex=0;
                }
                if (index === 1) {
                    this.isA = false;
                    this.isB = true;
                    this.isC = false;
                    this.currentindex=1;
                }
                if (index === 2) {
                    this.isA = false;
                    this.isB = false;
                    this.isC = true;
                    this.currentindex=2;
                }
            },
            hideenClick ()
            {

                this.isHidden=false;
                this.isA = false;
                this.isB = false;
                this.isC = false;
            },
            chooseHead(msg) {

                console.log(msg)
                this.msg = msg;  // msg: 123
                this.isHidden=false;
                this.isA = false;
                this.isB = false;
                this.isC = false;
            }


    }
    }
</script>

<style scoped>
    .div-backgrond {
        width: 100%;
        height: 30%;
        padding-left: 10px;
        padding-right: 20px;
        padding-top: 0px;
        display: flex;
        justify-content: flex-start;

    }
    .div-small
    {
        width: 35%;
    }
    .head-img
    {
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 0.55rem;
        margin-top: 0.2rem;
        margin-right: 0.8rem;
        margin-left: 0.2rem;
    }
    .jiantou
    {
        width: 1rem;
        height: 0.6rem;
        text-align: center;
        margin-bottom: 0.2rem;
        position: relative;
        top: -1.3rem;
        left:0.8rem;
    }

    .select
    {
        color: #a1a1a1;
        text-align: left;
        margin-left: 0.5rem;
    }
    .npselect
    {
        color: #e9b778;
        text-align: left;
        margin-left: 0.5rem;
    }
    .first
    {
        width: 0.6rem;
        height: 0.3rem;
        position: relative;
        left:-2.5rem;
    }
    .second
    {
        width: 0.6rem;
        height: 0.3rem;
        position: relative;


    }
    .three
    {
        width: 0.6rem;
        height: 0.3rem;
        position: relative;
        right:-2.4rem;
    }




</style>